<template>
  <div class="wrapper">
    <div class="actions" style="margin-bottom: 10px">
      <div class="left">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleOperation('', 'add')"
          >发起审计</el-button
        >
        <el-button type="primary" plain size="mini" @click="handleDelete"
          >删除</el-button
        >
      </div>
      <div class="right" style="display: flex">
        <el-button
          type="primary"
          size="mini"
          @click="resultClickFn"
          style="margin: 0px 10px 0px 0px"
          >重置
        </el-button>
        <SettinUp
          :settype="39"
          :objSettinUpdata="objSettinUp"
          key="3"
        ></SettinUp>
      </div>
    </div>
    <div class="table" v-if="header_data_list.length > 0">
      <TableHeader
        ref="TableHeaderList"
        :header_data_list="header_data_list"
        :HeaderData="HeaderData"
        :propMap="propMap"
        :redact="''"
        :particulars="''"
        :objheader="objheader"
        @orderIdNumsEvent="handleDeleteType"
        :operation_type="operation_type"
        @handleClickDetail_second="handleClickDetail_second"
        @handleClickEdit_second="handleClickEdit_second"
        origin="file"
      >
      </TableHeader>
    </div>
    <div style="text-align: end; margin: 10px 0">
      <el-pagination
        small
        background
        :current-page="paginations.pageIndex"
        :page-sizes="paginations.pageSizes"
        :page-size="paginations.pageSize"
        :layout="paginations.layout"
        :total="paginations.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- <el-table
      ref="multipleTable"
      :data="tableData"
      border
      stripe
      align="center"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45"> </el-table-column>
      <el-table-column
        prop=""
        label="序号"
        width="50"
        type="index"
      ></el-table-column>

      <el-table-column prop="audit_type" label="审计类型" width="180">
        <template slot-scope="scope">
          {{
            scope.row.audit_type === "0"
              ? "内部审计"
              : scope.row.audit_type === "1"
              ? "第三方审计"
              : scope.row.audit_type === "2"
              ? "客户审计"
              : scope.row.audit_type === "3"
              ? "承运商审计"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="audit_project" label="审计项目" width="180">
      </el-table-column>
      <el-table-column prop="audit_time" label="审计时间" width="180">
        <template slot-scope="scope">
          <span v-time="scope.row.audit_time"></span>
        </template>
      </el-table-column>
      <el-table-column prop="auditee" label="审计方" width="180">
      </el-table-column>
      <el-table-column prop="branch_id_name" label="所属区域" width="180">
      </el-table-column>
      <el-table-column prop="leader_id_name" label="负责人" width="180">
      </el-table-column>

      <el-table-column
        prop="quality_control_leader_id_name"
        label="状态"
        width="180"
      >
        <template slot-scope="scope">
          {{
            scope.row.status === "0"
              ? "待审计"
              : scope.row.status === "1"
              ? "审计通过"
              : scope.row.status === "2"
              ? "驳回"
              : ""
          }}</template
        >
      </el-table-column>
      <el-table-column
        prop=""
        fixed="right"
        align="center"
        label="操作"
        width="160"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            plain
            size="mini"
            @click="handleOperation(scope.row, 'detail')"
            >详情
          </el-button>
          <el-button
            type="text"
            plain
            size="mini"
            @click="handleOperation(scope.row, 'edit')"
            >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table> -->
  </div>
</template>

<script>
import { reqDeleteAudit, reqAuditList } from "@/api/qms";
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";

export default {
  name: "auditlist",
  components: { TableHeader, SettinUp },
  props: [],
  data() {
    return {
      tableData: [],
      header_data_list: [],
      HeaderData: [],
      propMap: {},
      operation_type: 1,
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      checkedList: [],
      searchParams: {},
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    resultClickFn() {
      this.$refs.TableHeaderList.childMethod();
      this.paginations.pageIndex = 1;
      this.paginations.pageSize = 10;
      this.getDataList();
    },
    objSettinUp() {
      this.getFileList();
    },
    objheader(obj) {
      this.paginations.pageIndex = 1;
      this.searchParams = obj;
      // console.log(obj, "-------------");
      this.getDataList(false);
    },
    handleOperation(row, mode) {
      this.$router.push({
        name: "auditEdit",
        query: {
          id: row.id,
          mode,
        },
      });
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    handleDeleteType(val) {
      this.checkedList = val;
    },
    handleClickDetail_second(row) {
      this.handleOperation(row, "detail");
    },
    handleClickEdit_second(row) {
      this.handleOperation(row, "edit");
    },

    // handleSelectionChange(checked) {
    //   this.checkedList = checked.map((item) => item.id);
    // },
    // 通过、驳回
    handleClickOperation(type) {
      this.reviewType = type;
      this.dialogVisible = true;
    },
    handleCloseDialog() {
      this.dialogVisible = false;
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getDataList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getDataList();
    },
    getDataList(setHeader = true) {
      reqAuditList({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams,
        create_time: undefined,
        header_id: 39 + "",
      }).then((res) => {
        this.tableData = res.data.data || [];
        this.paginations.total = res.data.pagination.total;
        this.tableData.unshift({});
        this.header_data_list = this.tableData;
        if (setHeader) {
          this.HeaderData = res.data.item_list;
          this.Fntransformation(this.HeaderData);
        }
      });
    },
    async handleDelete() {
      if (this.checkedList.length > 1) {
        this.$message({ type: "info", message: "只能同时删除一项" });
      } else {
        let result = await reqDeleteAudit({
          id: this.checkedList[0],
        });
        if (result.code === 10000) {
          this.$message({ type: "success", message: "删除成功！" });
          this.getDataList();
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 10px 15px;
  background-color: #fff;

  .orderHeader {
    // background-color: #fff;

    .orderSearch {
      form {
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }

        .el-textarea {
          width: 135px;
        }
      }
    }
  }
  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    // width: 100%;
    background-color: #fff;

    .el-button + .el-dropdown,
    .el-dropdown + .el-button {
      margin-left: 10px;
    }
  }
}
</style>